<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="en-US">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
		<link rel="shortcut icon" href="images/favicon.ico"/>
		<title>Umbra &#8211; Cart | HTML Ecommerce Template</title>

		<link rel="stylesheet" href="${basePath }/css/bootstrap.min.css" type="text/css" media="all"/>
		<link rel="stylesheet" href="${basePath }/css/prettyPhoto.css" type="text/css" media="all" />
		<link rel="stylesheet" href="${basePath }/css/magnific-popup.css" type="text/css" media="all" />
		<link rel="stylesheet" href="${basePath }/css/font-awesome.min.css" type="text/css" media="all" />
		<link rel="stylesheet" href="${basePath }/css/elegantIcon.css" type="text/css" media="all"/>
		<link rel="stylesheet" href="${basePath }/css/owl.carousel.css" type="text/css" media="all" />
		<link rel="stylesheet" href="${basePath }/css/owl.theme.css" type="text/css" media="all" />
		<link href="//fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i" rel="stylesheet">
		<link href="//fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800" rel="stylesheet">
		<link rel="stylesheet" href="${basePath }/css/style.css" type="text/css" media="all"/>
		<link rel="stylesheet" href="${basePath }/css/custom.css" type="text/css" media="all"/>

		<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
		<!--[if lt IE 9]>
			<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
			<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
	</head>
	<body>
		<div class="noo-spinner">
			<div class="sk-rotating-plane"></div>
		</div>
		<div class="site">
			<header class="noo-header fixed_top header-1">
				<div class="navbar-wrapper">
					<div class="navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-logo">
								<a href="./" class="custom-logo-link">
									<img src="${basePath }/images/logo.png" alt="Logo"/>
								</a>
								<button data-target=".nav-collapse" class="btn-navbar noo_icon_menu icon_menu"></button>
							</div>
							<nav class="noo-main-menu">
								<ul class="nav-collapse navbar-nav">
									<li class="menu-item-has-children">
										<a href="${basePath }/index/index">Home</a>
									</li>
									<li class="menu-item-has-children">
										<a href="#">Blog</a>
										<ul class="sub-menu">
											<li><a href="blog.html">Blog List</a></li>
											<li><a href="blog-masonry.html">Blog Masonry</a></li>
											<li><a href="blog-grid.html">Blog Grid</a></li>
											<li><a href="blog-alternate.html">Blog Alternate</a></li>
											<li class="menu-item-has-children">
												<a href="#">Blog Zigzag <i class="fa fa-caret-right"></i></a>
												<ul class="sub-menu">
													<li><a href="blog-zigzag.html">Blog Zigzag</a></li>
													<li><a href="blog-zigzag-2.html">Blog Zigzag 2</a></li>
													<li><a href="blog-zigzag-3.html">Blog Zigzag 3</a></li>
												</ul>
											</li>
											<li><a href="blog-detail.html">Single post</a></li>
										</ul>
									</li>
									<li class="menu-item-has-children">
										<a href="#">Shop</a>
										<ul class="sub-menu">
											<li class="menu-item-has-children">
												<a href="#">Shop Grid <i class="fa fa-caret-right"></i></a>
												<ul class="sub-menu">
													<li><a href="shop.html">Style 1</a></li>
													<li><a href="shop-2.html">Style 2</a></li>
													<li><a href="shop-3.html">Style 3</a></li>
												</ul>
											</li>
											<li><a href="shop-list.html">Shop List</a></li>
											<li><a href="shop-detail.html">Shop Detail</a></li>
											<li><a href="cart.html">Cart</a></li>
											<li><a href="cart-empty.html">Empty Cart</a></li>
											<li><a href="my-account.html">My Account</a></li>
											<li><a href="wishlist.html">Wishlist</a></li>
										</ul>
									</li>
									<li class="menu-item-has-children">
										<a href="#">Pages</a>
										<ul class="sub-menu">
											<li><a href="faq.html">FAQ</a></li>
											<li><a href="about-us.html">About us</a></li>
											<li><a href="404.html">404 page</a></li>
										</ul>
									</li>
									<li><a href="contact-us.html">Contact</a></li>
								</ul>
							</nav>
							<div class="navbar-meta">
								<ul>
									<li><a class="noo-search icon_search" href="#"></a></li>
									<li>
										<a class="noo-wishlist icon_heart_alt" href="wishlist.html"></a>
									</li>
									<li class="noo-menu-item-cart minicart">
										<a class="cart-button" href="#">
											<span class="cart-item">
												<i class="icon_bag_alt"></i>
												<span class="cart-count">2</span>
												<span class="cart-name-and-total">
													Cart(2)
												</span>
											</span>
										</a>
										<div class="noo-minicart">
											<div class="minicart-header">2 items in the shopping cart</div>
											<div class="minicart-body">
												<div class="cart-product clearfix">
													<div class="cart-product-image">
														<a class="cart-product-img" href="shop-detail.html">
															<img src="${basePath }/system/index.jspimages/product/thumb/product_1.jpg" alt="" />
														</a>
													</div>
													<div class="cart-product-details">
														<div class="cart-product-title">
															<a href="shop-detail.html">Corona Classic Chair</a>
														</div>
														<div class="cart-product-price">
															Price <span class="amount">&#36;400.00</span>
														</div>
														<div class="cart-product-quantity">
															Quantity 1
														</div>
													</div>
													<a href="#" class="remove icon_trash_alt"></a>
												</div>
												<div class="cart-product clearfix">
													<div class="cart-product-image">
														<a class="cart-product-img" href="shop-detail.html">
															<img src="${basePath }/system/index.jspimages/product/thumb/product_2.jpg" alt="" />
														</a>
													</div>
													<div class="cart-product-details">
														<div class="cart-product-title">
															<a href="shop-detail.html">Cuba Chair</a>
														</div>
														<div class="cart-product-price">
															Price <span class="amount">&#36;333.00</span>
														</div>
														<div class="cart-product-quantity">
															Quantity 1
														</div>
													</div>
													<a href="#" class="remove icon_trash_alt"></a>
												</div>
											</div>
											<div class="minicart-footer">
												<div class="minicart-total">
													Cart Subtotal <span class="amount">&#36;834.00</span>
												</div>
												<div class="minicart-actions clearfix">
													<a class="button" href="#">
														<span class="text">View Cart</span>
													</a>
													<a class="checkout-button button" href="#">
														<span class="text">Checkout</span>
													</a>
												</div>
											</div>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="search-header">
					<div class="remove-form"></div>
					<div class="container">
						<form class="form-horizontal noo-umbra-searchform">
							<label class="note-search">Type and Press Enter to Search</label>
							<input type="search" name="s" class="form-control" value="" placeholder="Enter keyword to search..."/>
							<button type="submit" class="noo-search-submit"><i class="icon_search"></i></button>
						</form>
					</div>
				</div>
			</header>
			<div class="noo-page-heading cart-heading">
				<div class="container">
					<div class="row">
						<div class="col-sm-12">
							<div class="noo-heading-content">
								<h1 class="page-title">Cart</h1>
								<p>It is a long established fact that a reader will be distracted</p>
								<div class="noo-page-breadcrumb">
									<span><a href="#">Home</a> <i class="arrow_right"></i> <span>Cart</span></span>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="main">
				<div class="section mt-10 mb-10">
					<div class="container">
						<div class="row">
							<div class="col-sm-12">
								<div class="commerce-cart">
									<table class="cart">
										<thead>
											<tr>
												<th class="product-thumbnail">Product</th>
												<th class="product-name">Name</th>
												<th class="product-price">Price</th>
												<th class="product-quantity">Quantity</th>
												<th class="product-subtotal">Total</th>
												<th class="product-remove">&nbsp;</th>
											</tr>
										</thead>
										<tbody>
										
											<c:forEach items="${CartList }" var="cartList">
											<tr class="cart_item">
												<td class="product-thumbnail">
													<a href="shop-detail.html">
														<img src="/system/index.jspimages/product/thumb/product_1.jpg" alt="" />
													</a>
												</td>
												<td class="product-name">
													<a href="shop-detail.html">${cartList.name } </a> 
												</td>
												<td class="product-price">
													&#36;${cartList.price }
												</td>
												<td class="product-quantity">
													<div class="quantity">
														<div class="noo-quantity-attr">
															<button class="qty-decrease" onclick="var qty_el = document.getElementById('qty'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 1 ) qty_el.value--;return false;" type="button">-</button>
															<input id="qty" type="text" name="quantity" value="1" class="input-text qty text" size="4" />
															<button class="qty-increase" onclick="var qty_el = document.getElementById('qty'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" type="button">+</button>
														</div>
													</div>
												</td>
												<td class="product-subtotal">
													&#36;211.00
												</td>
												<td class="product-remove">
													<a href="#">Remove</a>
												</td>
											</tr>
											
											</c:forEach>
											
											<%-- <tr class="cart_item">
												<td class="product-thumbnail">
													<a href="shop-detail.html">
														<img src="${basePath }/system/index.jspimages/product/thumb/product_2.jpg" alt="" />
													</a>
												</td>
												<td class="product-name">
													<a href="shop-detail.html">Cuba Chair </a> 
												</td>
												<td class="product-price">
													&#36;300.00
												</td>
												<td class="product-quantity">
													<div class="quantity">
														<div class="noo-quantity-attr">
															<button class="qty-decrease" onclick="var qty_el = document.getElementById('qty'); var qty = qty_el.value; if( !isNaN( qty ) && qty > 1 ) qty_el.value--;return false;" type="button">-</button>
															<input id="qty" type="text" name="quantity" value="1" class="input-text qty text" size="4" />
															<button class="qty-increase" onclick="var qty_el = document.getElementById('qty'); var qty = qty_el.value; if( !isNaN( qty )) qty_el.value++;return false;" type="button">+</button>
														</div>
													</div>
												</td>
												<td class="product-subtotal">
													&#36;300.00
												</td>
												<td class="product-remove">
													<a href="#">Remove</a>
												</td>
											</tr> --%>
											<tr>
												<td colspan="6" class="actions">
													<a class="empty-cart" href="${basePath }/cart/clearCart">clear shopping cart</a>
													<a class="continue" href="#">continue shopping</a>
													<a class="button" href="#">update shopping cart</a>
												</td>
											</tr>
										</tbody>
									</table>
								</div>
								<div class="cart-collaterals">
									<div class="noocart-coupon">
										<label>Discount code</label>
										<p>Enter your code if you have one</p>
										<input type="text" class="input-text" value="" placeholder="Coupon code" />
										<button class="noo-apply-coupon">Apply Coupon</button>
									</div>
									<div class="cart-totals">
										<h2>Cart Totals</h2>
										<table>
											<tbody>
												<tr class="cart-subtotal">
													<th>Subtotal</th>
													<td>&#36;834.00</td>
												</tr>
												<tr class="order-total">
													<th>Total</th>
													<td class="amount"><strong>&#36;834.00</strong></td>
												</tr>
											</tbody>
										</table>
										<div class="wc-proceed-to-checkout">
											<a href="#" class="checkout-button button">
												Proceed to Checkout
											</a>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<footer class="wrap-footer">
				<div class="footer-top pb-5">
					<div class="container">
						<div class="row">
							<div class="col-md-3 col-sm-6 footer-item">
								<div class="widget widget-noo-infomation">
									<h4 class="widget-title">Umbra Furniture</h4>
									<p class="info-desc">
										We are a global housewares product design company. We bring thought and creativity to everyday items through original design.
									</p>
									<ul class="noo-infomation-attr">
										<li>
											<span class="text-icon">A</span>
											<address>1001 Milacian Crest Street, Paris France </address>
										</li>
										<li>
											<span class="text-icon">T</span>
											<a href="#">+(084) 888 - 6789</a>
										</li>
										<li>
											<span class="text-icon">M</span>
											<a class="phone-text" href="mailto:Contact@Umbra.com" target="_top">Contact@Umbra.com</a>
										</li>
									</ul>
								</div>
							</div>
							<div class="col-md-3 col-sm-6 footer-item">
								<div class="widget">
									<h4 class="widget-title">Opening Time</h4>
									<ul class="noo-opening-time">
										<li>
											Mon - Fri: 8AM - 10PM
										</li>
										<li>
											Sat: 9AM-8PM
										</li>
										<li>
											Sun: Closed
										</li>
										<li>
											We Work All The Holidays
										</li>
									</ul>
								</div>
							</div>
							<div class="col-md-3 col-sm-6 footer-item">
								<div class="widget widget_nav_menu">
									<h4 class="widget-title">About</h4>
									<ul class="menu">
										<li><a href="#">About Us</a></li>
										<li><a href="#">Shopping Guide</a></li>
										<li><a href="#">Delivery Information</a></li>
										<li><a href="#">Privacy Policy</a></li>
										<li><a href="#">Our Store</a></li>
									</ul>
								</div>
							</div>
							<div class="col-md-3 col-sm-6 footer-item">
								<div class="widget widget_nav_menu">
									<h4 class="widget-title">Account</h4>
									<ul class="menu">
										<li><a href="#">My Account</a></li>
										<li><a href="#">Wishlist</a></li>
										<li><a href="#">Order Tracking</a></li>
										<li><a href="#">Shipping Info</a></li>
										<li><a href="#">Return Policy</a></li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="footer-bottom pb-5 text-center">
					<div class="container">
						<div class="row">
							<div class="col-sm-12">
								<a href="#"><img src="${basePath }/system/index.jspimages/payment_logo.png" alt="" /></a>
								<p class="mt-1">@ 2016. Developed by TK-Themes</p>
							</div>
						</div>
					</div>
				</div>
			</footer>
		</div>

		<a href="#" class="go-to-top hidden-print"><i class="fa fa-angle-up"></i></a> 

		<script type="text/javascript" src="${basePath }/js/jquery.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/jquery-migrate.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/modernizr-2.7.1.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/jquery.prettyPhoto.js"></script>
		<script type="text/javascript" src="${basePath }/js/jquery.prettyPhoto.init.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/jquery.magnific-popup.js"></script>
		<script type="text/javascript" src="${basePath }/js/off-cavnas.js"></script>
		<script type="text/javascript" src="${basePath }/js/imagesloaded.pkgd.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/isotope.pkgd.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/owl.carousel.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/jquery.countdown.min.js"></script>
		<script type="text/javascript" src="${basePath }/js/script.js"></script>
	</body>
</html>